<template>

      <el-table :data="meraddlist" style="width: 100%;margin-top: 20px" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="merchandiseId" label="商品编码" width="100"></el-table-column>
        <el-table-column prop="merchandiseName" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="merchandiseCategory" label="商品类别" width="110"></el-table-column>
        <el-table-column prop="specification" label="商品规格" width="110"></el-table-column>
        <el-table-column prop="subtotal" label="单价" width="100"></el-table-column>
        <el-table-column label="销售数量" align="center">
          <template #default="scope">
            <el-input-number v-model="scope.row.orderNum" @change="updateMertotal(scope.row)"/>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="100">
          <template #default="scope">
            {{ scope.row.mertotal }}
          </template>
        </el-table-column>
      </el-table>

  <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
      class="pagination-container"
  />

    <div style="text-align: center ; margin-top: 40px" >
        <el-button size="medium" @click="handlePrev">上一步，修改收货人信息</el-button>
        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交订单信息</el-button>
    </div>

</template>

<script>
    import {getMerInfo,listMerInfo} from "../../../api/system/merinfo.js";


    export default {
        name: "MerListInfo",
        data(){
            return{
                meraddlist:[],
              queryParams:{
                  pageNum:1,
                  pageSize:10,
              },
              total:null,
            }
        },
        mounted(){

            this.getMerListInfo();

        },


        methods:{

            updateMertotal(row) {
              console.log(row)
              row.mertotal = row.subtotal * row.orderNum;
           },

            handleUpdate(){

            },
            handlePrev() {
                this.$emit('prevStep')
            },
            handleFinishCommit(){
                this.$emit('finishCommit');
            },
            getMerListInfo(){
              listMerInfo().then(response =>{
                const processedData = response.rows.map(item => ({
                  ...item, // 保留原始的所有属性
                  orderNum: 0 // 添加 orderNum 属性并设置默认值
                }));
                this.meraddlist = processedData;
                this.total = response.total;
              }).catch(error =>{
                console.log(error);
                throw error;
              })
            }
        }
    }
</script>

<style scoped>
.form-container {
  width: 100%;
  padding: 20px;
}
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;

}
</style>